<template>
	<view class="app-container">
		<view class="content">
			<view v-for="(item,index) in addressList" :key="item.id">
				<liu-swipe-action :index="index" @clickItem="deleteAddress($event,item.id)">
					<view class="address-item">
						<view class="address-item-content">
							<view>
								<view class="address-dim">
									{{ item.province + item.city + item.region }}
								</view>
								<view class="address-detail">
									{{ item.detailAddress }}
								</view>
								<view class="link-detail">
									<view class="linkman">
										{{ item.name }}
									</view>
									<view class="link-tel">
										{{ item.phone }}
										<text class="tag" v-if="item.isDefault">默认</text>
									</view>
								</view>
							</view>
							<view @tap="editAddres(item)" class="img-box">
								<image class="edit" src="../../../static/icon/edit.png" mode=""></image>
							</view>
						</view>
						<hr>
					</view>
				</liu-swipe-action>
			</view>
		</view>
		<view class="address-footer">
			<view class="add-btn" @tap="addAddress">新建收货地址</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				addressList: []
			}
		},
		onShow() {
			this.loadData()
		},
		methods: {
			loadData() {
				$http.request({
					url: '/member/address/list',
					loading: true
				}).then(res => {
					if (res.success) {
						this.addressList = res.data
					}
				})
			},
			editAddres(record) {
				uni.navigateTo({
					url: '/pages/me/address/addressAdd?record=' + encodeURI(JSON.stringify(record))
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/me/address/addressAdd'
				})
			},
			deleteAddress(e,id) {
				$http.request({
					url: `/member/address/delete/${id}`,
					loading: true
				}).then(res => {
					if (res.success) {
						uni.showToast({
							duration: 1000,
							title: '地址已删除',
							icon: 'none'
						})
						this.loadData()
					} else {
						uni.showToast({
							duration: 1000,
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.app-container {
		padding: 20rpx;
		background-color: #F0F1F5;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.content {
		background-color: #FFF;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.address-item {
		/* height: 160rpx; */
		margin: 0 auto;
		background-color: #FFFFFF;
		/* border-radius: 16rpx; */
	}

	.address-item-content {
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.address-dim {
		font-size: 18rpx;
		color: #9F9F9F;
		/* padding: 10rpx 0; */
	}

	.address-detail {
		font-size: 30rpx;
		font-weight: 500;
	}

	.link-detail {
		display: flex;
		font-size: 26rpx;
	}

	.link-tel {
		color: #7D7D7D;
		margin-left: 40rpx;
		display: flex;
	}

	.img-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.edit {
		width: 30rpx;
		height: 30rpx;
	}

	hr {
		height: 1rpx;
		margin: auto;
		background-color: #E5E5E5;
		border: none;
		width: 90%;
	}

	.tag {
		font-size: 20rpx;
		color: #FFF;
		background-color: #F63732;
		padding: 0 5rpx;
		line-height: 26rpx;
		height: 26rpx;
		margin: auto 0;
		margin-left: 10rpx;
	}

	.address-footer {
		position: fixed;
		left: 0;
		bottom: var(--window-bottom, 0);
		width: 100%;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid white;
		text-align: center;
	}

	.add-btn {
		background: linear-gradient(to right, #F13020, #ED5223);
		border-radius: 30rpx;
		padding: 15rpx;
		width: 90%;
		margin: 10rpx auto;
		font-size: 26rpx;
		color: #FFF;
	}
</style>